<template>
  <div id="carShow"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading">
    <v-title title="项目管理看板"></v-title>

    <div style="position: relative;">
      <v-condition :isMultiple="true"></v-condition>
      <div class="item2">
        <label for="selectd">项目状态:</label>
        <el-select id="selectd" multiple class="marT" @change="statusChange" v-model="prjStatus" clearable filterable placeholder="请选择立项状态">
          <el-option
            v-for="item in prjOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"> 
          </el-option>
        </el-select>
      </div>
       <!-- -------更多------- -->
        <div class="block more">
          <label for="cascader">更多:</label>
          <el-cascader
            v-model="projectList"
            placeholder="请选择"
            :options="options1"
            :props="props"
            @focus="test"
            @change="toChange"
            collapse-tags
            clearable></el-cascader>
        </div>
    </div>

    <div class="btn-group2">
      <el-button v-if="exporting" class="down" @click="down" type="success" round>导出报表</el-button>
      <el-button v-if="control" class="jump" @click="permission" type="primary" round>权限配置</el-button>
      <el-button v-if="config" class="jump" @click="jump" type="primary" round>看板配置</el-button>
      <el-button v-if="record" class="update" @click="update" type="info" round >数据更新记录</el-button>
    </div>

    <transition name="fade">
        <div v-show="isShowTop" class="toTop" @click="toTop">
          <el-image
            style="width: 50px; height: 50px"
            :src="top"
            fit="cover"></el-image>
        </div>
    </transition>
   
    <!--<el-button class="marT posi" type="primary" round @click="reloaded">重置筛选</el-button>-->

    <div style="padding-bottom: 50px;" ref="top" class="table marT" :style="{'height': table['BU自评']['default'].length > 10 ? '580px':'auto'}" v-if="Object.keys(table).length">    
      <div class="flexTable"    
        :key="item + index" 
        v-for="(item, index) in Object.keys(table)" 
        >
        <el-table
          v-if="table[item][isShowList[index].isFolder].length"           
          ref="multipleTable"        
          :border="true"
          :header-cell-style="{background:'#42b1e8'}"
          :data="table[item][isShowList[index].isFolder]"                      
          style="width: 100%"
          :id="item === '操作' ? 'operate' : ''"
          >
          <el-table-column              
            :label="item"
            align="center"                 
          >
            <template slot-scope="scope" slot="header">
              <div class="span" v-if="item !== '项目风险管理' && item !== '本周周报状态' && item !== 'BU自评' && item !== '操作'" @click="toggle(item)">
                {{item}}       
                <template>
                  <i :class="returnClass(isShowList[index].isFolder)" v-if="item!=='操作'"></i>
                </template>
              </div>
              <div class="span" v-else>
                {{item}}       
              </div>
            </template>
            <el-table-column
              :width="column === '项目' ? 152 : 124"              
              v-for="(column, index2) in Object.keys(table[item][isShowList[index].isFolder][0])"
              :key="column+index2"             
              :label="column"
              align="center"           
            >   
              <template slot-scope="scope" slot="header">
                <span v-if="item !== '操作'">{{column}}</span>
                <i v-if="item !== '操作'" class="el-icon-caret-bottom" @click.prevent.stop="filterItem(table[item][isShowList[index].isFolder], column, index, item)"></i>
                <el-dialog
                  title="筛选列表"
                  :visible.sync="table[item][isShowList[index].isFolder][0][column].is_show"
                  width="20%"
                  :append-to-body="true"
                  >
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                  <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
                      <el-checkbox class="display-check" :key="label" v-for="label in list" :label="label"></el-checkbox>                
                    </el-checkbox-group>
                    <div class="fix">
                      <div class="border"></div>
                      <span class="border-span" @click="filterInitResult(column,params,index,item)">筛选</span>
                      <span class="border-span" @click="resetInitResult(column,params,index,item)">重置</span>                 
                    </div>
                </el-dialog>                             
              </template>
              <!-- 弹框 -->
              <template slot-scope="scope">
                <div class="item wordWrap"  v-if="scope.row.hasOwnProperty('录入')">
                  <span v-if="entrys" @click="entryOperate(scope.row[column])" style="{color: dimgray;cursor: pointer;}">编辑</span>
                  <span v-else>无权编辑</span>
                </div>
                <template v-else>
                  <el-tooltip 
                    class="item" 
                    effect="dark" 
                    :content="scope.row[column].hasOwnProperty('not_apply_state') && scope.row[column]['value'] === '-'? scope.row[column]['not_apply_state'] : (scope.row[column]['risk_reason'] || `未填写${scope.row[column]['value']}原因`)" 
                    placement="top" 
                    v-if="scope.row[column]['value'] == '高风险' || scope.row[column]['value'] == '中风险'|| scope.row[column]['value'] === '-'">
                      <div @click="close(column, index, item)" class="wordWrap" :class="[statusClass(scope.row[column]['value']), statusClass2(scope.row[column]['risk_level'])]">
                        {{ scope.row[column]['value'] || '/'}}
                      </div>
                  </el-tooltip>
                  <div class="item wordWrap"  v-else :class="[statusClass(scope.row[column]['value']), statusClass2(scope.row[column]['risk_level'])]">
                    {{ scope.row[column]['value'] || '/' }}
                  </div>
                </template>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
       <el-pagination
        class="marT posi2"
        v-show="total >= 10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"          
        background
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <el-drawer
      size="90%"
      :visible.sync="drawer"
      :direction="direction"
      id="drawer"
    >
      <span>数据更新情况</span>
      <div class="table">
        
        <label>最近更新时间:</label>
        <el-select @change="timeChange" clearable class="marT" v-model="timeArea" placeholder="请选择更新时间">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <label style="margin-left: 20px;">是否更新:</label>
        <el-select @change="upDateChange" clearable class="marT" v-model="checkboxUpdate" placeholder="请选择是否更新">
          <el-option
            v-for="item in updates"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>        
        <el-table
          v-loading="tableLoading"
          class="marT"          
          :border="true"
          :header-cell-style="{background: 'rgb(50, 65, 90)'}"
          :data="base.slice((baseCurrent-1)*baseSize, baseCurrent*baseSize)" 
          fit                     
          style="width: 100%"
          >
            <el-table-column
              label="项目"
              align="center"
              prop="project_name">     
            </el-table-column>           
            <el-table-column
              label="项目基础信息"
              align="center"
              > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.base_info"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="进度风险"
              align="center">
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.progress_risk"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="阶段点风险"
              align="center"
            >
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.milestone_risk"></v-button>
              </template> 
            </el-table-column>
            <el-table-column
              label="技术风险"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.tech_risk"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="质量风险"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.quality_risk"></v-button>
              </template>
            </el-table-column>
            <el-table-column
              label="成本风险"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.cost"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="商务风险"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.commerce_risk"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="客户满意度"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.customer_satisfaction"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="BU自评"
              align="center"
            > 
              <template slot-scope="scope">
                <v-button :statusObj="scope.row.self_assessment"></v-button>
              </template>
            </el-table-column>

            <el-table-column
              label="更新人"
              align="center"
            > 
              <template slot-scope="scope">
                <div>{{ scope.row.operator }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="最近更新时间"
              align="center"
            > 
              <template slot-scope="scope">
                <div>{{ scope.row.update_time }}</div>
              </template>
            </el-table-column>

            <el-table-column
              label="分类"
              align="center"
            > 
              <template slot-scope="scope">
                <div style="cursor: pointer;" @click="dialogResult(scope.row.project_id)" class="details">
                  查看详情
                </div>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination class="marT"
          v-show="baseTotal > 10"
          background  
          :page-size="baseSize"                                   
          @current-change="baseCurrentChange"
          :current-page="baseCurrent"
          @size-change="baseSizeChange"                              
          layout="total, prev, pager, next, jumper"
          style="text-align: left"
          :total="baseTotal">
        </el-pagination>
      </div>
    </el-drawer>

    <el-dialog width="80%" title="更新详情" :visible.sync="dialogTableVisible">
      <v-dialog
        v-if="dialogTableVisible"
        id="dialog"
        :tableList="dialogData" 
        :tableListLabel="tableListLabel"
      ></v-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import VTitle from '@/views/sys/internetThings/title'
  import VCondition from '@/views/data/carDispose/group'
  import { mapState, mapMutations } from 'vuex'
  import http from '@/views/sys/axios'
  import VButton from '../button' 
  import VDialog from '@/views/qa/dialog'
  import { Loading } from 'element-ui';


  export default {
    name: 'CarShow',
    components: {
      VTitle,
      VCondition,
      VButton,
      VDialog
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {  
        if(vm.dispose.projectIdList.length) {
          if(vm.config) {
            vm.getLookResult()
          }
        }     
        
      })
    },
    computed: {
      ...mapState({
        dispose: state => state.conditions.dispose,
        entryList: state => state.entryItem
      }),
      exporting() {
        let status = false
        status = this.entryList.car_export_perm === 1 ? true : false
        return status
      },
      control() {
        let status = false
        status = this.entryList.car_control_perm === 1 ? true : false
        return status
      },
      config() {
        let status = false
        status = this.entryList.car_config_perm === 1 ? true : false
        return status
      },
      record() {
        let status = false
        status = this.entryList.car_record_perm === 1 ? true : false
        return status
      },
      entrys() {
        let status = false
        status = this.entryList.car_entry_perm === 1 ? true : false
        return status
      }
    },
    created(){
        this.getFilter([],"")
    },
    mounted() { 
      window.addEventListener('scroll', this.screenScroll)
      if(this.dispose.projectIdList.length) {
        this.getInitResult(true)
      }
    },
    destroyed() {
      window.removeEventListener('scroll', this.screenScroll)
    },
    data() {
      return {
        props: { multiple: true },
        AMData:{},
        options1:[{
          value: 'AM',
          label: 'AM',
          children: []
        }, {
          value: 'PM',
          label: 'PM',
          children: []
        },{
          value: '客户简称',
          label: '客户简称',
          children: []
        },{
          value: '项目风险等级（BU自评）',
          label: '项目风险等级（BU自评）',
          children: []
        }],
        prjOptions: [
          {
            label: '变更',
            value: 0
          },
          // {
          //   label: '封存',
          //   value: 1
          // },
          {
            label: '项目结项',
            value: 2
          },
          {
            label: '立项',
            value: 3
          },
          // {
          //   label: '终止',
          //   value: 4
          // },
          {
            label: '研发结项',
            value: 5
          }
        ],
        rightData:'',
        prjStatus: [],
        projectList:[],
        tableLoading: false,
        drawer: false,
        direction: 'rtl',
        isShowList: [],
        table: {},
        tableInit: {},
        column: [],
        datas: {}, 
        datas2: {},        
        isIndeterminate: true,
        checkAll: false,
        isShowTop: false,
        checkList: [],
        checkAll: [],
        params: [],
        list: [],
        size: 0,
        loading: false,
        current: 1,
        sized: 0,
        total: 0,
        base: [],
        baseTotal: 0,
        baseSize: 10,
        baseCurrent: 1,
        dialogTableVisible: false,
        dialogData: [],
        timeArea: '',
        checkboxUpdate: '',
        updates: [
          {
            value: true,
            label: '已更新'
          },
          {
            value: false,
            label: '未更新'
          }
        ],
        currentTime: [], 
        timeOptions: [
          {
            value: 'three',
            label: '3天'
          },
          {
            value: 'seven',
            label: '7天'
          },
          {
            value: 'weeks',
            label: '14天'
          }
        ],
        radio: '',
        tableListLabel: [
          {
              label: '项目',
              param: 'project_name',
              align: 'center'
          },
          {
              label: '更新模块',
              param: 'dimension',
              align: 'center'
          }, 
          {
              label: '更新项',
              param: 'examine_item',
              align: 'center'
          },
          {
              label: '修改者',
              param: 'operator',
              align: 'center'
          },
          {
              label: '修改日志',
              param: 'operator_log',
              align: 'center'
          },
          {
              label: '更新时间',
              param: 'create_time',
              align: 'center'
          }                                           
        ],
        top: require('../../../../assets/top.png')
      }
    },
    inject: ['reload'],    
    methods: {
      ...mapMutations('conditions', [
        'setDispose'
      ]),
      down() {
        let data = {}  
        data.projects = this.dispose.projectIdList
        http.post(`/api/data_summary/car/project/file/download`, data, { responseType: 'blob' })
        .then(res => {
          const { data, code } = res
          if(code === 200) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '汽车管理看板数据模板.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          } else {
            this.$message.error('下载出错了!'); 
          }
        }).catch(err => {
          const { data } = err
          
          if(data) {
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', '汽车管理看板报表.xlsx')
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$message({
              showClose: true,
              message: '导出成功!',
              type: 'success'
            });
          } else {
            this.$message.error('下载出错了!'); 
          }
        })
      },
      jump() {
        this.$router.push({
          path: '/car/ai-car/carDispose'
        })
      },
      permission() {
        this.$router.push({
          path: '/car/ai-car/carPermission'
        })
      },
      update() {
        // this.getLookResult()
        this.drawer = true
      },
      baseCurrentChange(val) {
        this.baseCurrent = val
      },
      baseSizeChange(val) {
        this.baseSize = val
      },
      statusChange(val) {
        this.getLookResult()
        this.getInitResult()
      },
      toChange(val) {
        console.log(val)
        let list = {}

        val.forEach((item,index)=>{
          if(!list[item[0]]) {
            list[item[0]] = []
          }
          list[item[0]].push(item[1])
        })
        this.AMData = list
        console.log(this.AMData)
        this.getLookResult()
        this.getInitResult()
      },
      getNowFormatDate(cycle) {
        let date = new Date();
        let date2 = new Date();
        date2.setDate(date2.getDate() - cycle);
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();

        let year2 = date2.getFullYear();
        let month2 = date2.getMonth() + 1;
        let strDate2 = date2.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }

        if (month2 >= 1 && month2 <= 9) {
            month2 = "0" + month2;
        }
        if (strDate2 >= 0 && strDate2 <= 9) {
            strDate2 = "0" + strDate2;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        let currentdate2 = year2 + seperator1 + month2 + seperator1 + strDate2;
        this.currentTime = [currentdate, currentdate2];
      },
      upDateChange(val) {
        this.getLookResult()
      },
      cycleTimeCalc(value) {
        let cycle
        if(value === 'three') {
          cycle = 3
          this.getNowFormatDate(cycle)
        } else if(value === 'seven') {
          cycle = 7
          this.getNowFormatDate(cycle)
        } else {
          cycle = 14
          this.getNowFormatDate(cycle)
        }
      },
      timeChange(val) {  
        this.cycleTimeCalc(val)
        this.getLookResult()
      },
      getLook() {
        let data = {}  
        data.projects = this.dispose.projectIdList 
        data.update_time = this.currentTime
        if(this.checkboxUpdate !== '') {
          data.is_updated = this.checkboxUpdate
        } 
        data.project_status = this.prjStatus
        return http.post(`/api/data_summary/car/project/operate/info`, data)
      },
      async getLookResult() {
        this.tableLoading = true
        try {
          //const { code, result } = await this.getLook()
          // if(code === 200 ) {
          //   this.tableLoading = false
          //   this.base = result
          //   this.baseTotal = this.base.length
          // } else {
          //   this.tableLoading = false
          // }
           this.tableLoading = false
            this.base = []
            this.baseTotal = this.base.length
        } catch(err) {
          this.tableLoading = false
          throw err
        }
      },
      showDialog(id) {
        return http.get(`/api/data_summary/car/project/record?projectId=${id}`)
      },
      async dialogResult(id) {
        try {
          this.dialogTableVisible = true
          const { code, result } = await this.showDialog(id)
          if(code === 200) {
            this.dialogData = result
          }
        } catch(err) {
          throw new Error(err)
        }
      },
      handleCheckAllChange(val) {
        this.checkList = val ? this.list : [];
        this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.list.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
      },
      handleSizeChange(val) {
        this.sized = val
      },
      handleCurrentChange(val) {
        this.current = val 
        this.pageList()
        // this.getInitResult()
      },      
      filterItem(array, key, index, item) {       
        this.table[item][this.isShowList[index].isFolder][0][key].is_show = !this.table[item][this.isShowList[index].isFolder][0][key].is_show
        // this.isShowList[index].isShow = !this.isShowList[index].isShow
        this.getFilter(array, key)
        this.checkList = []
      },
      close(key, index, item) {
        this.table[item][this.isShowList[index].isFolder][0][key]['is_show'] = false
        // this.$set(this.table[item][this.isShowList[index].isFolder][0][key], 'is_show', false)
      },
      toggle(key) {
        this.isShowList.forEach(item => {
          // if(item.isFolder === 'extension') {
          //   item.isFolder = 'default'
          // }

          if(item.keyVal === key) {     
            if(item.keyVal !== 'BU自评' || item.keyVal !== '项目风险管理') {              
              if(item.isFolder === 'default') {                                         
                item.isFolder = 'extension'
                this.loading = true
                setTimeout(() => {
                  this.loading = false
                }, 1000)                           
              } else {
                item.isFolder = 'default'
              }                           
            } else {          
              item.isFolder = 'extension'
            }                      
          }
        })
        this.$refs.multipleTable.forEach(item => {
          item.clearSelection();
        })
      },
      toTop() {
        this.$refs.top.scrollIntoView({behavior: "smooth"})      
      },
      screenScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;
        scrollTop > clientHeight / 3 ? this.isShowTop = true : this.isShowTop = false
      },
      async filterChange(keys, value) {
        let arr = []
        Object.keys(keys).forEach(key => {    
          arr.push(...keys[key])     
        })
        value = this.column 
        this.filterInitResult(value, arr)
      },
      returnClass(condition) {
        return condition === 'default' ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'
      },
      statusClass(item) {
        switch (item) {
          case '高风险':
            return 'high';
            break;
          case '中风险':
            return 'middle';
            break;
          case '低风险':
            return 'low';
            break;
          default:
            return '';
            break;
        }     
      },
      statusClass2(item) {
        switch (item) {
          case 3:
            return 'high';
            break;
          case 2:
            return 'middle';
            break;
          case 1:
            return 'low';
            break;
          default:
            return '';
            break;
        }     
      },
      entryOperate(project) {
        this.setDispose({
            options: [project.group_name, project.dept_name, project.project_id],
            projectId: project.project_id
          })
        let filterInfo = Cookies.get('filterInfo') ? JSON.parse(Cookies.get('filterInfo')) : {}
        filterInfo = Object.assign(filterInfo,this.datas2)
        delete filterInfo.projects
        delete filterInfo.project_status
        Cookies.set('filterInfo', filterInfo) 
          
        this.$router.push({
          path: '/CarSupplement'
        })
      },
      // 更多 数据
      async test(optionData) {
        //  console.log(this)
	      await (function(){
          let data = this.datas
          data.projects = this.dispose.projectIdList
          data.name = 'AM'
          data.project_status = this.prjStatus
          // console.log(this.datas)
          http.post(`/api/data_summary/car/project/condition`,{name:'AM',projects:this.dispose.projectIdList,project_status: this.prjStatus}).then(res => {
            const { code, result } = res
            if(code === 200) {
              let res = Array.from(new Set(result))  
              res = res.filter(fil => fil !== null)
              for(let i = 0;i<res.length;i++){
                this.options1[0].children.push({
                  value:res[i],
                  label:res[i]
                })
              }  
              // console.log(this.options1)     
            } else {            
            }
          }).catch(err => {
            throw err
          })
       }).bind(this)()
        await function(){
          let data = this.datas
          data.projects = this.dispose.projectIdList
          data.name = 'PM'
          data.project_status = this.prjStatus
          // console.log(this.datas)
          http.post(`/api/data_summary/car/project/condition`, {name:'PM',projects:this.dispose.projectIdList,project_status: this.prjStatus}).then(res => {
                  const { code, result } = res
                  if(code === 200) {
                    let res = Array.from(new Set(result))  
                    res = res.filter(fil => fil !== null) 
                    for(let i = 0;i<res.length;i++){
                      this.options1[1].children.push({
                        value:res[i],
                        label:res[i]
                      })
                    }        
                  } else {            
                  }
                }).catch(err => {
                  throw err
                })
        }.bind(this)()  
          await function(){
          let data = this.datas
          data.projects = this.dispose.projectIdList
          data.name = '客户简称'
          data.project_status = this.prjStatus
          // console.log(this.datas)
          http.post(`/api/data_summary/car/project/condition`, {name:'客户简称',projects:this.dispose.projectIdList,project_status: this.prjStatus}).then(res => {
                  const { code, result } = res
                  if(code === 200) {
                    let res = Array.from(new Set(result))  
                    res = res.filter(fil => fil !== null) 
                    for(let i = 0;i<res.length;i++){
                      this.options1[2].children.push({
                        value:res[i],
                        label:res[i]
                      })
                    }        
                  } else {            
                  }
                }).catch(err => {
                  throw err
                })
        }.bind(this)()  
        await function(){
          let data = this.datas
          data.projects = this.dispose.projectIdList
          data.name = '项目风险等级'
          data.project_status = this.prjStatus
          // console.log(this.datas)
          http.post(`/api/data_summary/car/project/condition`, {name:'项目风险等级',projects:this.dispose.projectIdList,project_status: this.prjStatus}).then(res => {
                  const { code, result } = res
                  if(code === 200) {
                    let res = Array.from(new Set(result))  
                    res = res.filter(fil => fil !== null) 
                    for(let i = 0;i<res.length;i++){
                      this.options1[3].children.push({
                        value:res[i],
                        label:res[i]
                      })
                    }        
                  } else {            
                  }
                }).catch(err => {
                  throw err
                })
        }.bind(this)() 
      },
      getFilter(array, key) { 
        let value = []
        
        value = this.checkList
        // console.log('shaixuan',array,key)
        value = value.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        
        this.datas[key] = value        
        this.datas.projects = this.dispose.projectIdList
        this.datas.name = key
        this.datas.project_status = this.prjStatus
        this.datas = Object.assign(this.datas, this.datas2)
        http.post(`/api/data_summary/car/project/condition`, this.datas).then(res => {
          const { code, result } = res
          // console.log('222',res)
          // this.checkList = []
          if(code === 200) {
            // console.log(code)
            let res = Array.from(new Set(result))  
            res = res.filter(fil => fil !== null)  
            this.list = res
          } else {            
            this.list = []
          }
        }).catch(err => {
          throw err
        })
      },
      pageList() {
        this.datas2.projects = this.dispose.projectIdList 
        this.datas2.project_status = this.prjStatus
        http.post(`/api/data_summary/car/project/data?page=${this.current}`, this.datas2)
        .then(res => {      
          this.loading = true
          const { code, result, count } = res
          if(code === 200) {
            let list = result
            this.loading = false
            this.table = result
            this.tableInit = list
            this.total = count
            
            Object.keys(this.table).forEach(key => {
              if(key === 'BU自评') {
                this.isShowList.push({
                  isFolder: 'extension',
                  keyVal: key,
                  isShow: false
                })
              } else {
                this.isShowList.push({
                  isFolder: 'default',
                  keyVal: key,
                  isShow: false
                })
              }              
            }).catch(err => {
              throw new Error(err)
              this.loading = false
            })
          }
        })
      },
      // 筛选
      filterInit(item, value) {
        // console.log(1223123243242342343242)
        value = this.checkList
        value = value.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        this.current = 1
        this.datas2[item] = value
        this.datas2.projects = this.dispose.projectIdList  
        this.datas2.project_status = this.prjStatus   
        // 你得给那个联级选择器双向绑定一个值，然后根据后端要求的数据格式处理下数据
        // 然后在所有= this.prjStatus 的地方试着把projects=你处理完的数据，不用this.dispose.projectIdList
        return http.post(`/api/data_summary/car/project/data?page=${this.current}`, this.datas2)   
      },
      reseting(item, value) {
        value = this.checkList
        value = value.map(val => {
          if(val == null) {
            val = ''
          }
          return val
        })
        this.current = 1
        // console.log(2222222)
        // this.datas2[name] = name
        this.datas2.projects = this.dispose.projectIdList
        this.datas2.project_status = this.prjStatus
        let obj = Object.keys(this.datas2)
        obj.forEach(name => {
          name === item && delete this.datas2[name]
        }) 
              
        return http.post(`/api/data_summary/car/project/data?page=${this.current}`, this.datas2)
      },
      async resetInitResult(item, value, index, key) {
        try {
          this.close(item, index, key)
          
          const { code, result, count } = await this.reseting(item, value)
          if(code === 200) {
            let list = result
            this.table = result
            this.tableInit = list
            this.total = count           
            this.checkList = []            
          }
        } catch(err) {
          throw err
        }
      },
      async filterInitResult(item, value, index, key) {
        try {
          this.close(item, index, key)
          
          const { code, result, count } = await this.filterInit(item, value)
          if(code === 200) {
            let list = result
            this.table = result
            this.tableInit = list
            this.total = count           
            this.checkList = []
          }
        } catch(err) {
          throw new Error(err)
        }
      },
      reloaded() {
        this.reload()
      },
      // 更多筛选
      getInit(first) {
        let data = {}
        if(first) {
          data = Cookies.get('filterInfo')? JSON.parse(Cookies.get('filterInfo')) : {}
          this.datas2 = Object.assign(this.datas2,data)
          Cookies.remove('filterInfo')
        }
        data.projects =this.dispose.projectIdList 
        // console.log(this.dispose.projectIdList)
        data.project_status = this.prjStatus
        data = Object.assign(data,this.AMData)
        return http.post(`/api/data_summary/car/project/data?page=${this.current}`, data)
      },
      async getInitResult(first) {
        try {
          this.loading = true
          const { code, result, count } = await this.getInit(first)
          if(code === 200) {
            let list = result
            this.loading = false
            this.table = result
            this.tableInit = list
            this.total = count
            // console.log(this.total)
            // this.total = this.table['项目基础信息/端到端体制'].default.length
            
            Object.keys(this.table).forEach(key => {
              if(key === 'BU自评') {
                this.isShowList.push({
                  isFolder: 'extension',
                  keyVal: key,
                  isShow: false
                })
              } else {
                this.isShowList.push({
                  isFolder: 'default',
                  keyVal: key,
                  isShow: false
                })
              }              
            })
          }
        } catch(err) {
          throw new Error(err)
          this.loading = false
        }
      }
    },
    watch: {
      dispose: {
        handler: function(newVal) {
          if(this.dispose.projectIdList.length) {
            this.getInitResult()
            if(this.config) {
              // console.log(this.config)
              this.getLookResult()
            }
          }
        },
        deep: true
      },
      // dialogTableVisible(newVal) {
      //   if(!newVal) {
      //     this.dialogData = []
      //   }
      // }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../../../../styles/dis.scss");
  
  #dialog >>> .el-table thead{
    color: #909399;
  }
  /deep/ .el-table thead {
    color: #fff;
  }
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  /deep/ .el-table colgroup.gutter{
    display: table-cell!important;
  }
  /deep/ .el-drawer.rtl{
    padding: 10px 36px;
    overflow: auto;
  }
  /deep/ .el-table__column-filter-trigger i{
    color: #fff; 
    font-size: 18px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    margin-left: 5px;
  }
  /deep/ .el-table th{
    padding: 0;
    height: 100px;
    position: relative;
  }
  
  /deep/ .el-table--border th:first-child .cell{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .el-table th div{
    white-space: initial;
    width: 100%;
  }
  /deep/ .el-tooltip__popper.is-dark{
    max-width: 210px;
  }

  .more{
    position: absolute;
    left: 51%;
    width: 20%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 19px;
    span{
      margin-right: 25px;
    }
  }
  .item2{
    position: absolute;
    left: 30%;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    label{
      margin: auto;
      margin-top: 30px;
    }
  }
  .display-check{
    display: block;
  }
  .posi2{
    position: absolute;
    z-index: 99;
    bottom: 52px;
  }
  .btn-group2{
    position: absolute;
    top: 150px;
    right: 60px;
    .down, .jump{
      
    }
  }
  .border{
    border-bottom: 2px solid #ddd;
    margin-top: 12px;
  }
  .border-span{
    cursor: pointer;
    margin-top: 12px;
    display: inline-block;
  }
  .filters{
    max-height: 200px; 
    min-height: 100px;
    background: #fff;
    font-size: 12px;
    color: #999;
    overflow-y: scroll;
    position: absolute;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 2px 12px;
    transform-origin: center top;
    z-index: 2010;
    text-align: left;
    top: 40px;
    z-index: 9999;
  }
  .wrapper{
    position: relative;
  }
  /deep/ .el-table th div.filters{
    width: 150px;
    max-width: 250px;
    word-wrap: break-word;
    word-break: normal;
    overflow-x: scroll;
    white-space: normal;
  }
  #operate >>> .el-table__column-filter-trigger i{
    display: none;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .posi{
    position: absolute;
    top: 129px;
    right: 42%;
  }
  .toTop{
    position: fixed;
    bottom: 80px;
    right: 25px;
    z-index: 10;
  }
  #carShow{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    .btn-group{
      text-align: right;
    }
    .table{
      overflow-x: auto;
      .flexTable{
        display: table-cell;
        position: relative;
        .span{
          cursor: pointer;
        }
      }
      .wordWrap{
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;      
      }
    }
  }
  @media screen and (max-width: 1440px){
    .item2{
      position: absolute;
      left: 34%;
      width: 27%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .posi {
      position: absolute;
      top: 33px;
      right: 6%;
    }
  }
  .marT{
      margin-top: 20px;
  }
  .high{
    color: #e4393c;
  }
  .middle{
    color: #e6a23c;
  }
  .low{
    color: #67c23a;
  }
</style>